Création d'un menu de navigation simple et responsive
Pour commencer, il faut déjà une structure HTML pour ce menu. On utilise la plupart du temps une liste <ul> pour lister les liens à l'intérieure :
<nav class="custom-navbar">
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
<li><a href="#">Lien 5</a></li>
</ul>
</nav>
Sans code CSS, le menu donne ça visuellement :
Un peu de CSS sur le conteneur du menu :
.custom-navbar{
background-color: #a81829;
}
.custom-navbar ul{
/* Suppression des marges naturelles de la liste ul */
margin: 0;
padding: 0;
/* Affichage des li en ligne grâce à flexbox */
display: flex;
flex-direction: row;
/* Suppression des petites billes noires devant les éléments de la liste */
list-style: none;
}
Résultat :
Stylisation des liens maintenant :
.custom-navbar{
background-color: #a81829;
}
.custom-navbar ul{
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
list-style: none;
}
.custom-navbar ul li a{
color: white;
/* Agrandissement de l'espace autour du texte des liens pour donner une apparence rectangle au lien */
padding: 25px;
/* Agrandissement de la taille du texte des liens */
font-size: 1.4rem;
/* Retrait du soulignement des liens */
text-decoration: none;
/* Transition de 0.3 secondes pour le hover */
transition: .3s all ease;
/* Transformation des liens en type "block", sinon ils ne peuvent pas avoir de marges top et bottom ! */
display: block;
}
/* Quand la souris passe sur un des liens, il change de couleur de texte et de couleur de fond */
.custom-navbar ul li a:hover{
color: #a81829;
background-color: white;
}
Résultat :
Il ne reste maintenant plus qu'à rendre ce menu responsive en passant tous les liens en colonne sur les petits écrans :
.custom-navbar{
background-color: #a81829;
}
.custom-navbar ul{
margin: 0;
padding: 0;
display: flex;
/* Par défaut, les boutons seront affichés en colonnes, puis la media query mettre en direction row sur les grands écrans (principe du mobile first !) */
flex-direction: column;
list-style: none;
}
.custom-navbar ul li a{
color: white;
padding: 25px;
font-size: 1.4rem;
text-decoration: none;
transition: .3s all ease;
display: block;
}
.custom-navbar ul li a:hover{
color: #a81829;
background-color: white;
}
/* Media query qui s'activera sur les écrans faisant au moins 700 pixels de large */
@media screen and (min-width: 700px) {
/* Sur les grands écrans, les liens seront en ligne et non plus en colonne. En cas de manque de place, les liens passeront en dessous */
.custom-navbar ul{
flex-direction: row;
flex-wrap: wrap;
}
}
Résultat (réduisez la taille de la fenêtre pour voir le changement !) :